<!-- src/views/Pay.vue -->
<template>
  <div class="pay-wrapper">
    <div class="pay-title">三角账户充值</div>

    <div class="pay-platform">
      支付平台：
      <img src="@/assets/img/alipay.png" alt="支付宝" class="alipay-logo" />
    </div>

    <form class="pay-form" @submit.prevent="goPay">
      <div class="section-title">充值金额：</div>

      <div class="radio-group">
        <label v-for="item in presetOptions" :key="item.value" class="radio-item">
          <input type="radio" name="amount" :value="item.value" v-model="selectedAmount" />
          {{ item.label }}
        </label>

        <label class="radio-item">
          <input type="radio" value="custom" v-model="selectedAmount" />
          自定义金额：
          <input
              type="number"
              class="custom-input"
              v-model="customAmount"
              :disabled="selectedAmount !== 'custom'"
          />
          元
        </label>
      </div>

      <div class="subject-line">
        充值说明：
        <input type="text" v-model="subject" class="subject-input" placeholder="如：充值三角币" />
      </div>

      <div class="notice">
        您今天还有 <span class="highlight">10</span> 次自定义充值机会！
      </div>

      <div class="btn-wrapper">
        <button type="submit" class="pay-button">下一步</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const presetOptions = [
  { label: '购买1000点三角币 ￥10元人民币', value: 10 },
  { label: '购买3000点三角币 ￥30元人民币', value: 30 },
  { label: '购买5000点三角币 ￥50元人民币', value: 50 },
  { label: '购买10000点三角币 ￥100元人民币', value: 100 },
  { label: '购买20000点三角币 ￥200元人民币', value: 200 },
]

const selectedAmount = ref(10)
const customAmount = ref(100)
const subject = ref('充值三角币')

const goPay = () => {
  const amount = selectedAmount.value === 'custom' ? customAmount.value : selectedAmount.value
  if (!amount || amount <= 0) {
    alert('请输入有效的金额')
    return
  }

  window.open(router.resolve({
    path: '/payForm',
    query: {
      total: amount,
      subject: subject.value,
    }
  }).href)
}
</script>

<style scoped>
@import '@/assets/css/pay.css';
</style>
